import { PenChildProps } from "@/types";
import { Button, Input, Space } from "antd";
import { FormRowCol } from "@/components/common/FormRowCol.tsx";
import { ReactAceEditor } from "@/components/common/ReactAceEditor.tsx";
import { useState } from "react";

export function PenToolTip({ penOptions, setPenValue }: PenChildProps) {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Space
        style={{ padding: "10px" }}
        className={"w-full"}
        direction="vertical"
      >
        <FormRowCol label={"文字提示"}>
          <Input.TextArea
            value={penOptions.title}
            onChange={(e) => {
              setPenValue("title", e.target.value);
            }}
          />
        </FormRowCol>
        <FormRowCol label={"自定义函数"}>
          <ReactAceEditor
            open={open}
            tip={"例如：return `${pen.name}:${pen.text}`;"}
            onCancel={() => setOpen(false)}
            onOk={(codeText) => {
              setPenValue("titleFnJs", codeText);
              setOpen(false);
            }}
            value={penOptions.titleFnJs || ""}
          />
          <Button onClick={() => setOpen(true)}>编 辑</Button>
        </FormRowCol>
      </Space>
    </>
  );
}
